<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Index</title>
<link rel="stylesheet" type="text/css"
	href="../js/ExtJs2.1/resources/css/ext-all.css"></link>
<script type="text/javascript"
	src="../js/ExtJs2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ExtJs2.1/ext-all.js"></script>
</head>

<script type="text/javascript">
	Ext
			.onReady(function() {
				//初始化校验提示信息 
				Ext.QuickTips.init();

				// turn on validation errors beside the field globally
				//开启校验提示标志 
				Ext.form.Field.prototype.msgTarget = 'side';

				/*
				 * whole layout
				 */
				var viewport = new Ext.Viewport(
						{
							layout : 'border',
							items : [
									{
										title : 'CreditReportManager',
										region : 'north',
										collapsible : true,
										height : 80,
										html : '<br><center><font size=3>CreditReportManager</font></center><br>'
									}, {
										title : 'menu',
										region : 'west',
										items : Ext.get('menuTreeDiv'), //custom tree
										collapsible : true,
										width : 130
									}, {
										title : 'mainContent',
										id : 'mainContent',
										region : 'center',
										items : Ext.get('mainDiv')
									} ]
						});

				/*
				 *menuTree(left)
				 */
				var root = new Ext.tree.TreeNode({
					id : 'root',
					text : 'root'
				});
				var insertNode = new Ext.tree.TreeNode({
					id : 'insertNode',
					text : 'insert'
				});
				var updateNode = new Ext.tree.TreeNode({
					id : 'updateNode',
					text : 'update'
				});
				var preciseQueryNode = new Ext.tree.TreeNode({
					id : 'preciseQueryNode',
					text : 'preciseQuery'
				});
				var fuzzyQueryNode = new Ext.tree.TreeNode({
					id : 'fuzzyQueryNode',
					text : 'fuzzyQuery'
				});
				var deleteNode = new Ext.tree.TreeNode({
					id : 'deleteNode',
					text : 'delete'
				});
				var nodeArr = [ insertNode, updateNode, preciseQueryNode,
						fuzzyQueryNode, deleteNode ];
				root.appendChild(nodeArr);
				var menuTree = new Ext.tree.TreePanel({
					renderTo : 'menuTreeDiv',
					root : root,
					hrefTarget : 'mainContent',
					width : 130
				});

				var pageSize = 10;

				//cardType 
				var comboData = [ [ '01', '1' ], [ '02', '2' ], [ '03', '3' ] ];
				var comboStore = new Ext.data.SimpleStore({
					fields : [ 'value', 'text' ],
					data : comboData
				});

				var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(),
						{
							header : 'NAME',
							dataIndex : 'name',
							sortable : true
						}, {
							header : 'cardType',
							dataIndex : 'cardType',
							sortable : true
						}, {
							header : 'cardId',
							dataIndex : 'cardId',
							sortable : true
						}, {
							header : 'content',
							dataIndex : 'content',
							sortable : false
						} ]);
				var cmPrecise = new Ext.grid.ColumnModel([
						new Ext.grid.RowNumberer(), {
							header : 'NAME',
							dataIndex : 'name',
							sortable : true
						}, {
							header : 'cardType',
							dataIndex : 'cardType',
							sortable : true
						}, {
							header : 'cardId',
							dataIndex : 'cardId',
							sortable : true
						}, {
							header : 'content',
							dataIndex : 'content',
							sortable : true
						} ]);
				var selectModel = new Ext.grid.RowSelectionModel({
					singleSelect : true
				});

				// 	 var selectModelUpdate = new Ext.grid.RowSelectionModel({singleSelect:true});

				function detailFn() {
					var rowDetail = selectModel.getSelected();
					if (rowDetail == null) {
						Ext.Msg.alert('alert', 'plz choose one data');
						return;
					}

					var detailArr = [ rowDetail.get('name'),
							rowDetail.get('cardType'), rowDetail.get('cardId'),
							rowDetail.get('content') ];
					var detailPanel = new Ext.form.FormPanel({
						//	 			fieldDefaults:{},
						defaultType : 'textfield',
						defaults : {
							readOnly : true
						},
						items : [ {
							fieldLabel : 'name',
							name : 'name',
							value : detailArr[0],
							allowBlank : false
						}, {
							fieldLabel : 'cardType',
							name : 'cardType',
							value : detailArr[1],
							allowBlank : false
						}, {
							fieldLabel : 'cardId',
							name : 'cardId',
							value : detailArr[2],
							allowBlank : false
						}, {
							fieldLabel : 'content',
							name : 'content',
							value : detailArr[3],
							allowBlank : false
						} ]
					});
					var detailWin = new Ext.Window({
						title : "detail",
						width : 300,
						height : 300,
						items : detailPanel,
						buttons : [ {
							id : 'detailWinClose',
							text : 'close',
							handler : function() {
								detailWin.close();
							}
						} ]
					});
					detailWin.show();
				} // end of function detailFn

				/*
				 * 点击树的节点 通过node.id来判断,对mainDiv进行不同效果的渲染 
				 */
				//var gpHtml = gridPanel.getEl().dom.innerHTML;
				var nodeClickFn = function(node, event) {
					var nodeId = node.id;
					var mainDiv = Ext.get("mainDiv");
					//将mainDiv滞空,以便重新渲染,缺点是每次进入的新页面都要在不同的if else里新new 
					mainDiv.update("");

					if ('insertNode' == nodeId) {
						// 			mainDiv.update(gpHtml);
						var insertForm = new Ext.form.FormPanel({
							// 			renderTo:'mainDiv',
							title : 'insert form',
							frame : true,
							autoHeight : true,
							autoWidth : true,
							autoScroller : true,
							// 			defaultType : 'textfield',
							items : [ {
								xtype : 'textfield',
								fieldLabel : 'name',
								name : 'name',
								allowBlank : false
							}, {
								xtype : 'combo',
								fieldLabel : 'cardType',
								name : 'cardType',
								id : 'cardType',
								anchor : '13%',
								store : comboStore,
								mode : 'local',
								triggerAction : 'all', //激活所有 
								valueField : 'value',
								displayField : 'text'
							}, {
								xtype : 'textfield',
								fieldLabel : 'cardId',
								name : 'cardId',
								allowBlank : false
							}, {
								xtype : 'textarea',
								fieldLabel : 'content',
								id : 'content',
								allowBlank : false,
								anchor : '95%'
							} ],
							buttons : [ {
								id : 'insertBtn',
								text : 'insert',
								handler : insertFn
							}, {
								id : 'resetBtn',
								text : 'reset',
								handler : resetInsertFormFn
							} ]
						});
						insertForm.render(mainDiv);
						function insertFn() { //提交insertForm表单
							insertForm.getForm().submit({
								clientValidateion : true,
								url : '../report.do?action=insert',
								method : 'POST',
								success : function(form, action) {
									//	alert(action.result);
									Ext.Msg.alert('msg', 'insert success');
								},
								failure : function(form, action) {
									Ext.Msg.alert('msg', 'insert failure ' + action.failureType);
								}
							})//end of insertForm.getForm().submit()
						}
						function resetInsertFormFn() { //重置insertForm表单
							insertForm.getForm().reset();
						}
					} else if ('updateNode' == nodeId) {

						var searchForm = new Ext.form.FormPanel({
							//					renderTo:'mainDiv',
							title : 'search (update)',
							frame : true,
							autoHeight : true,
							autoWidth : true,
							autoScroller : true,
							defaultType : 'textfield',
							// 					defaultType : 'displayfield',			
							items : [ {
								fieldLabel : 'name',
								name : 'name'
							}, {
								xtype : 'combo',
								fieldLabel : 'cardType',
								name : 'cardType',
								id : 'cardType',
								anchor : '13%',
								store : comboStore,
								mode : 'local',
								triggerAction : 'all', //激活所有 
								valueField : 'value',
								displayField : 'text'
							}, {
								fieldLabel : 'cardId',
								name : 'cardId'
							} ],
							buttons : [ {
								id : 'updateSearchBtn',
								text : 'search'
							} //模糊查询
							]
						});
						searchForm.render(mainDiv);

						Ext
								.get('updateSearchBtn')
								.on(
										'click',
										function() {

											//get the search form's properties , so important
											//通过表单,得到查询条件
											var objects = searchForm.getForm()
													.getValues();
											//通过objects.属性名得到属性
											var name = objects.name;
											var cardType = objects.cardType;
											var cardId = objects.cardId;
											// 					alert(name + " " + cardType + " " + cardId );

											//update的查询store	(其实是一个fuzzyQuery)
											var storeJson = new Ext.data.JsonStore(
													{
														//						autoLoad:true,
														url : '../report.do?action=fuzzyQuery&name='
																+ name
																+ '&cardType='
																+ cardType
																+ '&cardId='
																+ cardId,
														root : 'data',
														totalProperty : 'totalCount',
														id : 'threadid',
														fields : [ 'name',
																'cardType',
																'cardId',
																'content' ]
													});
											//	alert(BLANK_IMAGE_URL);
											//这是update的查询结果列表
											var gridPanelUpdate = new Ext.grid.GridPanel(
													{
														title : 'gridPanel(updateList)',
														cm : cm,
														store : storeJson,
														autoHeight : true,
														autoExpandColumn : 4,
														selModel : selectModel,
														tbar : [ {
															text : 'update',
															handler : updateFn
														} ],
														bbar : new Ext.PagingToolbar(
																{
																	pageSize : pageSize,
																	store : storeJson,
																	displayInfo : true,
																	displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
																	emptyMsg : "没有记录"
																})
													});
											gridPanelUpdate.store.load({
												params : {
													start : 0,
													limit : pageSize
												}
											});
											function updateFn() {
												var rowDetail = selectModel
														.getSelected();
												if (rowDetail == null) {
													Ext.Msg
															.alert('alert',
																	'plz choose one data');
													return;
												}
												var detailArr = [
														rowDetail.get('name'),
														rowDetail
																.get('cardType'),
														rowDetail.get('cardId'),
														rowDetail
																.get('content') ];
												var updateForm = new Ext.form.FormPanel(
														{
															//	 			fieldDefaults:{},
															defaultType : 'textfield',
															defaults : {
																readOnly : true
															},
															items : [
																	{
																		fieldLabel : 'name',
																		name : 'name',
																		value : detailArr[0],
																		allowBlank : false
																	},
																	{
																		fieldLabel : 'cardType',
																		name : 'cardType',
																		value : detailArr[1],
																		allowBlank : false
																	},
																	{
																		fieldLabel : 'cardId',
																		name : 'cardId',
																		value : detailArr[2],
																		allowBlank : false
																	},
																	{
																		fieldLabel : 'content',
																		name : 'content',
																		value : detailArr[3],
																		allowBlank : false,
																		readOnly : false
																	} ],
															buttons : [ {
																id : 'updateBtn',
																text : 'update',
																handler : updateService
															} ]
														}); // end of var updateForm
												function updateService() { //更新时提交数据到servlet
													updateForm
															.getForm()
															.submit(
																	{
																		url : '../report.do?action=update',
																		method : 'POST',
																		success : function(
																				form,
																				action) {
																			Ext.Msg
																					.alert(
																							'alert',
																							'update success');
																			//update之后,刷新列表
																			gridPanelUpdate.store
																					.reload({
																						params : {
																							start : 0,
																							limit : pageSize
																						}
																					});
																			gridPanelUpdate
																					.render('mainDiv');
																		},
																		failure : function(
																				form,
																				action) {
																			Ext.Msg
																					.alert(
																							'alert',
																							'update failure : '
																									+ action.failureType);
																		}
																	});
												}//end of updateService
												var updateWin = new Ext.Window(
														{
															title : "update",
															width : 300,
															height : 300,
															items : updateForm,
															buttons : [ {
																text : 'close',
																handler : function() {
																	updateWin
																			.close();
																}
															} ]
														});
												updateWin.show();

											}//end of updateFn
											gridPanelUpdate.store.load({
												params : {
													start : 0,
													limit : pageSize
												}
											});
											mainDiv.update("");
											gridPanelUpdate.render(mainDiv);

										});
					} else if ('preciseQueryNode' == nodeId) {
						//精确查询 查询条件输入form 			
						var preciseSearchForm = new Ext.form.FormPanel({
							title : 'preciseQueryForm',
							frame : true,
							autoHeight : true,
							autoWidth : true,
							autoScroller : true,
							defaultType : 'textfield',
							items : [ {
								fieldLabel : 'name',
								name : 'name',
								id : 'name',
								dataIndex : 'name'
							}, {
								xtype : 'combo',
								fieldLabel : 'cardType',
								name : 'cardType',
								id : 'cardType',
								anchor : '13%',
								store : comboStore,
								mode : 'local',
								triggerAction : 'all', //激活所有 
								valueField : 'value',
								displayField : 'text'
							}, {
								fieldLabel : 'cardId',
								name : 'cardId',
								id : 'cardId'
							} ],
							buttons : [ {
								id : 'preciseQuery',
								text : 'preciseQuery',
								handler : preciseQueryFn
							} ]
						}); // end of var preciseSearchForm
						preciseSearchForm.render('mainDiv');

						function preciseQueryFn() {
							//get the search form's properties , so important
							//通过表单,得到查询条件
							var objects = preciseSearchForm.getForm()
									.getValues();
							//通过objects.属性名得到属性
							// 					alert(objects.name + ' ' + objects.cardType + ' ' + objects.cardId);
							var name = objects.name;
							var cardType = objects.cardType;
							var cardId = objects.cardId;
							var storeJsonPrecise = new Ext.data.JsonStore({
								url : '../report.do?action=preciseQuery&name='
										+ name + '&cardType=' + cardType
										+ '&cardId=' + cardId,
								root : 'data',
								totalProperty : 'totalCount',
								id : 'threadidPrecise',
								fields : [ 'name', 'cardType', 'cardId',
										'content' ]
							});
							//精确查询,查询结果列表 
							var gridPanelPrecise = new Ext.grid.GridPanel({
								title : 'preciseQueryList',
								cm : cmPrecise,
								store : storeJsonPrecise,
								autoHeight : true,
								autoExpandColumn : 4,
								selModel : selectModel,
								tbar : [ {
									text : 'detail',
									handler : detailFn
								} ],
								bbar : new Ext.PagingToolbar({
									pageSize : pageSize,
									store : storeJsonPrecise,
									displayInfo : true,
									displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
									emptyMsg : "没有记录"
								})
							});
							gridPanelPrecise.store.load({
								params : {
									start : 0,
									limit : pageSize
								}
							});
							mainDiv.update("");
							gridPanelPrecise.render('mainDiv');
						}// end of preciseQueryFn

					} else if ('fuzzyQueryNode' == nodeId) {
						var searchForm = new Ext.form.FormPanel({
							//					renderTo:'mainDiv',
							title : 'search (fuzzy)',
							frame : true,
							autoHeight : true,
							autoWidth : true,
							autoScroller : true,
							defaultType : 'textfield',
							//					defaultType : 'displayfield',			
							items : [ {
								fieldLabel : 'name',
								name : 'name'
							}, {
								xtype : 'combo',
								fieldLabel : 'cardType',
								name : 'cardType',
								id : 'cardType',
								anchor : '13%',
								store : comboStore,
								mode : 'local',
								triggerAction : 'all', //激活所有 
								valueField : 'value',
								displayField : 'text'
							}, {
								fieldLabel : 'cardId',
								name : 'cardId'
							} ],
							buttons : [ {
								id : 'fuzzySearchBtn',
								text : 'search'
							} //模糊查询
							]
						});// end of searchForm
						searchForm.render(mainDiv);
						Ext
								.get('fuzzySearchBtn')
								.on(
										'click',
										function() {

											var objects = searchForm.getForm()
													.getValues();
											var name = objects.name;
											var cardType = objects.cardType;
											var cardId = objects.cardId;
											var storeJsonFuzzy = new Ext.data.JsonStore(
													{
														// 							autoLoad:true,
														url : '../report.do?action=fuzzyQuery&name='
																+ name
																+ '&cardType='
																+ cardType
																+ '&cardId='
																+ cardId,
														root : 'data',
														totalProperty : 'totalCount',
														id : 'threadidFuzzy',
														fields : [ 'name',
																'cardType',
																'cardId',
																'content' ]
													});
											//updatePanel 与 detailPanel的区别是  
											//1:toolbar的按钮是updata还是detail 
											//2:点击之后的弹出框是否可以修改 
											var gridPanelFuzzy = new Ext.grid.GridPanel(
													{
														title : 'gridPanel(fuzzy)',
														cm : cm,
														store : storeJsonFuzzy,
														autoHeight : true,
														autoExpandColumn : 4,
														selModel : selectModel,
														tbar : [ {
															text : 'detail',
															handler : detailFn
														} ],
														bbar : new Ext.PagingToolbar(
																{
																	pageSize : pageSize,
																	store : storeJsonFuzzy,
																	displayInfo : true,
																	displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
																	emptyMsg : "没有记录"
																})
													});
											//pass the search condition to "SERVLET"
											//以前的传值方式是:'在store load之前将参数设置进store,根据store传值 ,但是这种方式IE无法接受 !所以改成先得到表单数据(查询条件),再把他们设置到url里  '
											// 					gridPanelFuzzy.store.on('beforeload' , function(tempStore , opt) {
											//get the search form's properties , so important
											//通过表单,得到查询条件
											// 						var objects = searchForm.getForm().getValues();
											//通过objects.属性名得到属性
											//alert(objects.name + '_' + objects.cardType + '_' + objects.cardId);
											// 						tempStore.baseParams["name"] = objects.name,
											// 						tempStore.baseParams["cardType"] = objects.cardType,
											// 						tempStore.baseParams["cardId"] = objects.cardId
											// 					});
											gridPanelFuzzy.store.load({
												params : {
													start : 0,
													limit : pageSize
												}
											});
											mainDiv.update("");
											gridPanelFuzzy.render(mainDiv);
										});

					} else if ('deleteNode' == nodeId) {//while 'deleteNode' clicked , immediately post a REQUEST to selectForList(All)
						var storeJsonDelete = new Ext.data.JsonStore(
								{
									// 					autoLoad:{start : 0 , limit : pageSize},
									// 					autoLoad : true,
									url : '../report.do?action=fuzzyQuery',
									root : 'data',
									method : 'POST',
									totalProperty : 'totalCount',
									id : 'threadidDelete',
									fields : [ 'name', 'cardType', 'cardId',
											'content' ]
								});

						var searchForm = new Ext.form.FormPanel({
							//					renderTo:'mainDiv',
							title : 'search (delete)',
							// 					hidden:true,//设置为隐藏 invisible 
							frame : true,
							autoHeight : true,
							autoWidth : true,
							autoScroller : true,
							defaultType : 'textfield',
							//					defaultType : 'displayfield',			
							items : [ {
								fieldLabel : 'name',
								name : 'name'
							}, {
								xtype : 'combo',
								fieldLabel : 'cardType',
								name : 'cardType',
								id : 'cardType',
								anchor : '13%',
								store : comboStore,
								mode : 'local',
								triggerAction : 'all', //激活所有 
								valueField : 'value',
								displayField : 'text'
							}, {
								fieldLabel : 'cardId',
								name : 'cardId'
							} ],
							buttons : [ {
								id : 'deleteSearchBtn',
								text : 'search'
							} //模糊查询
							]
						});// end of searchForm
						searchForm.render(mainDiv);
						var gridPanelDelete = new Ext.grid.GridPanel({
							title : 'gridPanel(delete)',
							collapsible : true,//可收缩
							animCollapse : true,//收缩动画效果 
							cm : cm,
							store : storeJsonDelete,
							autoHeight : true,
							autoExpandColumn : 4,
							selModel : selectModel,
							tbar : [ {
								text : 'delete',
								handler : deleteFn
							} ],
							bbar : new Ext.PagingToolbar({
								pageSize : pageSize,
								store : storeJsonDelete,
								displayInfo : true,
								displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
								emptyMsg : "没有记录"
							})
						}); // end of var gridPanelDelete
						gridPanelDelete.store.load({
							params : {
								start : 0,
								limit : pageSize
							}
						});
						mainDiv.update("");
						gridPanelDelete.render(mainDiv);

						function deleteFn() {
							var rowDelete = selectModel.getSelected();
							if (rowDelete == null) {
								Ext.Msg.alert('alert', 'plz choose one data');
								return;
							}
							var deleteArr = [ rowDelete.get('name'),
									rowDelete.get('cardTyper'),
									rowDelete.get('cardId'),
									rowDelete.get('content') ];
							Ext.Msg.confirm('confirm', 'delete this data?',
									deleteCallBack);
							function deleteCallBack(opt) {
								if ('yes' == opt) {
									Ext.Ajax
											.request({
												url : '../report.do?action=delete',
												method : 'POST',
												params : {
													name : deleteArr[0],
													cardType : deleteArr[1],
													cardId : deleteArr[2],
													content : deleteArr[3]
												},
												success : function(form, action) {
													Ext.Msg.alert('msg',
															'delete success');
													//删除之后,刷新列表 
													gridPanelDelete.store
															.reload({
																params : {
																	start : 0,
																	limit : pageSize
																}
															});
													gridPanelDelete
															.render(mainDiv);
												},
												failure : function(form, action) {
													Ext.Msg
															.alert(
																	'msg',
																	'delete failure'
																			+ action.falureType);
												}
											}); // end of Ext.ajax.request
								} else {
									return;
								}
							} // end of  function deleteCallBack(opt)
						} // end of function deleteFn()
					} // end of big IF/ELSE
				} // end of nodeClickFn

				root.on("expand", function(rootNode) {
					Ext.each(rootNode.childNodes, function(item, index) {
						item.on('click', nodeClickFn);
					});
				})

			});
</script>







<body>
	<div id="menuTreeDiv"></div>
	<div id="mainDiv"></div>
</body>
</html>